package com.abc.robot01.activity

import android.os.Bundle
import android.util.Log
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableFloatStateOf
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.TextUnit
import androidx.compose.ui.unit.dp
import androidx.compose.ui.window.Dialog
import com.abc.robot01.R
import com.abc.robot01.vivemodel.BaoJiaViewModel

/**
 *  查看报价
 */
class BaoJiaActivity : BaseVoiceActivity() {

    private val viewModel: BaoJiaViewModel by viewModels()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        viewModel.renderConfigId.value = intent.getStringExtra("renderConfigId")!!.also {
            Log.e(TAG, "renderConfigId:$it")
        }

        viewModel.load()

        setContent {
            val showDialog = remember {
                viewModel.show
            }

            val price = remember {
                viewModel.price
            }

            if (showDialog.value)
                MinimalDialog {
                }

            MaterialTheme {
                Box {
                    Image(painter = painterResource(id = R.drawable.z1), contentDescription = "")
                    Row(modifier = Modifier.padding(30.px)) {
                        BackButton()
                        Spacer(modifier = Modifier.width(82.px))
                        Column {
                            BasicText(
                                text = "查看报价",
                                style = TextStyle(
                                    fontSize = 30.mysp,
                                    color = Color.Black,
                                    fontWeight = FontWeight.Bold
                                ),
                            )
                            Spacer(modifier = Modifier.height(30.px))

                            Column(
                                verticalArrangement = Arrangement.spacedBy(30.px),
                                modifier = Modifier.verticalScroll(rememberScrollState())
                            ) {
                                Content1(title = "报价综合分析", yingzhuang = price.value.yz.toString(),jjsp=price.value.jjsp.toString()) {
                                    Column(
                                        modifier = Modifier
                                            .fillMaxWidth()
                                            .background(Color.Transparent)
                                            .padding(
                                                top = 30.px
                                            )
                                    ) {
                                        Header1(price.value.jczx.toString(),sf=price.value.sf.toString(),qtfy = price.value.qtfy.toString(),yzzc=price.value.yzzc.toString())
                                    }
                                }
                                Content2(price.value.yz.toString())
                            }

                        }
                    }
                    BottomBar2() {}
                }
            }
        }
        Log.e(TAG, "onCreate");
    }

    @Composable
    fun ItemRow(item: Item) {
        ItemContent(item.name, item.price, item.price2, item.total)
    }

    @Composable
    fun ColumnScope.Content1(
        title: String,
        yingzhuang: String,
        jjsp: String,
        content: @Composable ColumnScope.() -> Unit
    ) {
        Card(
            modifier = Modifier
                .width(1400.px)
                .height(492.px)
                .background(Color.Transparent),
            shape = RoundedCornerShape(20.px)
        ) {
            Column(
                modifier = Modifier
                    .padding(
                        start = 30.px,
                        top = 30.px,
                        bottom = 0.px,
                        end = 30.px
                    )
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    BasicText(
                        text = "报价综合分析",
                        style = TextStyle(
                            fontSize = 28.mysp,
                            color = MYBLACK,
                            fontWeight = FontWeight.Bold
                        ),
                    )
                    Spacer(modifier = Modifier.weight(100f))

                    MyButton01(
                        modifier = Modifier.size(172.px, 48.px),
                        text = "税费调整", containerColor = MYBLUE,
                        textColor = Color.White,
                        shape = RoundedCornerShape(10.px)
                    ) {
                        viewModel.show.value=true
                    }
                }

                Spacer(modifier = Modifier.height(30.px))
                Row(verticalAlignment = Alignment.CenterVertically) {
                    BasicText(
                        text = "硬装",
                        style = TextStyle(
                            fontSize = 24.mysp,
                            color = MYBLACK,
                            fontWeight = FontWeight.Bold
                        ),
                    )
                    Spacer(modifier = Modifier.weight(100f))

                    BasicText(
                        text = yingzhuang,
                        style = TextStyle(
                            fontSize = MyFont_Size,
                            color = MYBLUE,
                            fontWeight = FontWeight.Bold
                        )
                    )

                }
                content()
                Spacer(modifier = Modifier.height(10.px))
                Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier
                    .height(60.px)
                    .clickable {
                        startActivity<YingZhuangActivity>() {
                            putExtra("index", 2)
                            putExtra("renderConfigId", viewModel.renderConfigId.value)

                        }
                    }) {
                    BasicText(
                        text = "家居饰品",
                        style = TextStyle(
                            fontSize = 24.mysp,
                            color = MYBLACK,
                            fontWeight = FontWeight.Bold
                        ),
                    )
                    Spacer(modifier = Modifier.weight(100f))

                    BasicText(
                        text = jjsp,
                        style = TextStyle(
                            fontSize = MyFont_Size,
                            color = MYBLUE,
                            fontWeight = FontWeight.Bold
                        )
                    )

                    Spacer(modifier = Modifier.width(10.px))
                    Image(painter = painterResource(id = R.drawable.right), contentDescription = "")
                }
            }
        }
    }

    @Composable
    fun ColumnScope.Content2(qian: String) {
        Card(
            modifier = Modifier
                .width(1400.px)
                .background(Color.Transparent),
            shape = RoundedCornerShape(20.px)
        ) {
            Column(
                modifier = Modifier
                    .padding(
                        start = 30.px,
                        top = 30.px,
                        bottom = 30.px,
                        end = 30.px
                    )
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    BasicText(
                        text = "空间材料报价",
                        style = TextStyle(
                            fontSize = 28.mysp,
                            color = MYBLACK,
                            fontWeight = FontWeight.Bold
                        ),
                    )
                    Spacer(modifier = Modifier.weight(100f))
                }

                Spacer(modifier = Modifier.height(30.px))
                Header2()

                val dataList = remember { dataList }
                Column {
                    dataList.forEach {
                        ItemRow(it);
                    }
                }
            }
        }
    }


    companion object {
        val TAG = "BaoJiaActivity"
    }

    @Composable
    fun ItemContent(name: String, size: String, price: String, total: Float) {
        val shape = RoundedCornerShape(
            topStart = 4.dp,
            topEnd = 4.dp,
            bottomStart = 0.dp,
            bottomEnd = 0.dp
        )
        Surface(
            modifier = Modifier
                .background(Color(0x00333333))
                .width(1340.px)
                .height(
                    62.px
                ),
            color = Color(0x00333333),
            shape = shape
        ) {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier.padding(
                    start = 30.px,
                    end = 30.px,
                    top = 0.px,
                    bottom = 0.px
                )
            ) {
                BasicText(
                    modifier = Modifier.width(100.px),
                    text = name,
                    style = TextStyle(
                        fontSize = MyFont_Size,
                        color = Color.Black
                    ),
                )

                Spacer(modifier = Modifier.width((93 + 48).px))

                BasicText(
                    modifier = Modifier.width(140.px),
                    text = "" + size + "",
                    style = TextStyle(
                        fontSize = MyFont_Size,
                        color = Color.Black,
                        textAlign = TextAlign.End
                    ),
                )

                Spacer(modifier = Modifier.width(296.px))

                BasicText(
                    modifier = Modifier.width(150.px),
                    text = price,
                    style = TextStyle(
                        fontSize = MyFont_Size,
                        textAlign = TextAlign.End,
                        color = Color.Black
                    ),
                )
                Spacer(modifier = Modifier.weight(100f))

                BasicText(
                    text = "" + total + "",
                    style = TextStyle(
                        fontSize = MyFont_Size,
                        color = Color.Black
                    ),
                )
            }
        }
    }

    @Composable
    fun ColumnScope.Header1(jczc:String,sf:String,qtfy:String,yzzc: String) {
        Column {
            Row(
                verticalAlignment = Alignment.CenterVertically,
                modifier = Modifier
                    .width(1340.px)
                    .clickable {
                        startActivity<YingZhuangActivity>() {
                            putExtra("index", 0)
                            putExtra("renderConfigId", viewModel.renderConfigId.value)
                        }
                    }
                    .height(60.px)
                    .background(
                        color = MYBLACK_Percent5,
                        shape = RoundedCornerShape(10.px, 10.px, 0.px, 0.px)
                    )
                    .padding(start = 20.px, end = 20.px)
            ) {
                BasicText(
                    text = "基础装修",
                    style = TextStyle(
                        fontSize = MyFont_Size,
                        color = Color.Black.copy(alpha = 0.8f)
                    ),
                )
                Spacer(modifier = Modifier.weight(100.0f))

                BasicText(
                    text = jczc,
                    style = TextStyle(
                        fontSize = 20.mysp,
                        color = MYBLACK_Percent80,
                        fontWeight = FontWeight.Bold
                    )
                )

                Spacer(modifier = Modifier.width(10.px))
                Image(painter = painterResource(id = R.drawable.right), contentDescription = "")
            }
        }
        Spacer(modifier = Modifier.height(2.px))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .width(1340.px)
                .clickable {
                    startActivity<YingZhuangActivity>() {
                        putExtra("index", 1)
                        putExtra("renderConfigId", viewModel.renderConfigId.value)
                    }
                }
                .height(60.px)
                .background(color = MYBLACK_Percent5, shape = RoundedCornerShape(0.px))
                .padding(start = 20.px, end = 20.px)
        ) {
            BasicText(
                text = "硬装主材",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black.copy(alpha = 0.8f)
                ),
            )
            Spacer(modifier = Modifier.weight(100.0f))

            BasicText(
                text = yzzc,
                style = TextStyle(
                    fontSize = 20.mysp,
                    color = MYBLACK_Percent80,
                    fontWeight = FontWeight.Bold
                )
            )

            Spacer(modifier = Modifier.width(10.px))
            Image(painter = painterResource(id = R.drawable.right), contentDescription = "")
        }

        Spacer(modifier = Modifier.height(2.px))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .width(1340.px)
                .height(60.px)
                .background(color = MYBLACK_Percent5, shape = RoundedCornerShape(0.px))
                .padding(start = 20.px, end = 20.px)
        ) {
            BasicText(
                text = "其他费用5%",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black.copy(alpha = 0.8f)
                ),
            )
            Spacer(modifier = Modifier.weight(100.0f))

            BasicText(
                text = qtfy,
                style = TextStyle(
                    fontSize = 20.mysp,
                    color = MYBLACK_Percent80,
                    fontWeight = FontWeight.Bold
                )
            )
        }

        Spacer(modifier = Modifier.height(2.px))
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .width(1340.px)
                .height(60.px)
                .background(
                    color = MYBLACK_Percent5,
                    shape = RoundedCornerShape(0.px, 0.px, 10.px, 10.px)
                )
                .padding(start = 20.px, end = 20.px)
        ) {
            BasicText(
                text = "税费20%",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black.copy(alpha = 0.8f)
                ),
            )
            Spacer(modifier = Modifier.weight(100.0f))

            BasicText(
                text = sf,
                style = TextStyle(
                    fontSize = 20.mysp,
                    color = MYBLACK_Percent80,
                    fontWeight = FontWeight.Bold
                )
            )
        }
    }

    @Composable
    fun ColumnScope.Header2() {
        val shape = RoundedCornerShape(
            topStart = 4.dp,
            topEnd = 4.dp,
            bottomStart = 0.dp,
            bottomEnd = 0.dp
        )
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .size(1340.px, 60.px)
                .background(color = MYBLACK_Percent5, shape = shape)
                .padding(
                    start = 30.px,
                    end = 30.px,
                    top = 0.px,
                    bottom = 0.px
                )
        ) {
            BasicText(
                text = "空间",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black
                ),
            )
            Spacer(modifier = Modifier.width(237.px))

            BasicText(
                text = "硬装主材",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black
                ),
            )
            Spacer(modifier = Modifier.width(350.px))
            BasicText(
                text = "家居饰品",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black
                ),
            )
            Spacer(modifier = Modifier.weight(100f))
            BasicText(
                text = "合计",
                style = TextStyle(
                    fontSize = MyFont_Size,
                    color = Color.Black
                ),
            )
        }
    }

    private val dataList = mutableStateListOf(
        Item(id = 1, name = "客厅", price = "￥9,419.30", price2 = "￥8,419.30", total = 13455.00f),
        Item(id = 2, name = "卧室", price = "￥7,819.50", price2 = "￥6,819.50", total = 12345.50f),
        Item(id = 3, name = "厨房", price = "￥3,219.90", price2 = "￥2,919.90", total = 5319.00f),
        Item(id = 4, name = "书房", price = "￥5,499.40", price2 = "￥4,999.40", total = 8999.50f),
        Item(id = 5, name = "餐厅", price = "￥6,999.80", price2 = "￥5,999.80", total = 11234.80f),
        Item(id = 6, name = "阳台", price = "￥2,019.70", price2 = "￥1,819.70", total = 3899.90f),
        Item(id = 7, name = "卫生间", price = "￥4,599.90", price2 = "￥3,999.90", total = 7599.60f),
        Item(id = 8, name = "走廊", price = "￥1,599.40", price2 = "￥1,299.40", total = 3199.80f),
        Item(id = 9, name = "客房", price = "￥8,219.20", price2 = "￥7,819.20", total = 13123.00f),
        Item(
            id = 10,
            name = "地下室",
            price = "￥10,999.60",
            price2 = "￥9,999.60",
            total = 15999.90f
        )
    )


    data class Item(

        val id: Int = 0,
        /**
         * 名称
         */
        val name: String = "基础装修",

        /**
         * 价格
         */
        val price: String = "1229/㎡",

        /**
         * 价格
         */
        val price2: String = "1229/㎡",
        /**
         *  面积
         */
        val size: Int = 109,

        /**
         * 金额
         */
        val total: Float = 13455.00f,
    )


    @Composable
    fun MinimalDialog(onDismissRequest: () -> Unit) {
        val question = remember { mutableStateOf("") }
        Dialog(onDismissRequest = { onDismissRequest() }) {
            Box(
                modifier = Modifier
                    .background(color = Color.White, shape = RoundedCornerShape(20.px))
                    .size(680.px, 462.px),
            ) {
                Column(
                    modifier = Modifier.padding(start = 30.px, top = 30.px, end = 30.px)
                ) {
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Text(
                            text = "调整税费",
                            style = TextStyle(
                                color = MYBLACK
                            ), fontSize = 30.mysp, fontWeight = FontWeight.Normal
                        )
                        Spacer(modifier = Modifier.weight(100.0f))
                        Image(
                            painter = painterResource(id = R.drawable.close2),
                            contentDescription = "",
                            modifier = Modifier.clickable {
                            viewModel.show.value=false
                            }
                        )
                    }

                    Spacer(modifier = Modifier.height(30.px))
                    Row(verticalAlignment = Alignment.CenterVertically) {
                        Text(
                            text = "基础装修",
                            style = TextStyle(
                                color = MYBLACK
                            ), fontSize = 24.mysp, fontWeight = FontWeight.Normal
                        )
                        Spacer(modifier = Modifier.width(20.px))
                        CustomStyledTextField3(
                            last = "元/㎡", text = question, textColor = Color(0xff000000),
                            size = DpSize(540.px, 50.px),
                            keyboardOptions = KeyboardOptions.Default.copy(
                                keyboardType = KeyboardType.Number
                            )
                        )
                    }
                    Spacer(modifier = Modifier.height(30.px))

                    Row(
                        verticalAlignment = Alignment.CenterVertically,
                        modifier = Modifier.background(Color.Transparent)
                    ) {
                        Text(
                            text = "其他费用",
                            style = TextStyle(
                                color = MYBLACK
                            ), fontSize = 24.mysp, fontWeight = FontWeight.Normal
                        )

                        Spacer(modifier = Modifier.width(20.px))

                        var sliderPosition by remember { viewModel.sliderPosition }

                        CustomSlider(
                            width2 = 438,
                            width = 438.px,
                            value = sliderPosition,
                            onValueChange = { value -> sliderPosition = value },
                        )
                    }

                        Spacer(modifier = Modifier.height(30.px))
                        Row(
                            verticalAlignment = Alignment.CenterVertically,
                            modifier = Modifier.background(Color.Transparent)
                        ) {
                            Text(
                                modifier = Modifier.width(96.px),
                                textAlign = TextAlign.End,
                                text = "税率",
                                style = TextStyle(
                                    color = MYBLACK
                                ), fontSize = 24.mysp, fontWeight = FontWeight.Normal
                            )

                            Spacer(modifier = Modifier.width(20.px))

                            var sliderPosition2 by remember { viewModel.sliderPosition2 }

                            CustomSlider(
                                width2 = 438,
                                width = 438.px,
                                value = sliderPosition2,
                                onValueChange = { value -> sliderPosition2 = value },
                            )

//                        Slider(
//                            modifier= Modifier.graphicsLayer(scaleY=1.0f, scaleX = 1.0f),
//                            value = sliderPosition,
//                            onValueChange = { value -> sliderPosition = value },
//                            valueRange = 0f..100f
//                        )


                        }
                        Spacer(modifier = Modifier.height(50.px))
                        Row {
                            Spacer(modifier = Modifier.weight(100.0f))
                            CancelButton() {
                                viewModel.show.value = false
                            }
                            Spacer(modifier = Modifier.width(20.px))
                            ConfirmButton2() {
                                viewModel.show.value = false
                            }
                        }
                    }
                }
            }
        }
    }

    @Composable
    fun MyButton1000(
        modifier: Modifier = Modifier,
        text: String,
        containerColor: Color = MYBLACK_Percent5,
        shape: Shape = ButtonDefaults.shape,
        textColor: Color = Color.White,
        fontSize: TextUnit = MyFont_Size,
        click: (text: String) -> Unit = { }
    ) {
        Button(
            contentPadding = PaddingValues(top = 0.px),
            onClick = { click(text) },
            colors = ButtonDefaults.buttonColors(
                containerColor = containerColor,
                contentColor = textColor
            ),
            shape = shape,
            modifier = modifier
        ) {
            BasicText(
                text = text,
                style = TextStyle(
                    fontSize = fontSize,
                    color = textColor,
                )
            )
            Spacer(modifier = Modifier.width(10.px))
            Image(painter = painterResource(id = R.drawable.ask), contentDescription = "")
        }
    }

@Composable
fun BoxScope.BottomBar2(onClick: () -> Unit) {
    Row(
        modifier = Modifier
            .align(Alignment.BottomCenter)
            .fillMaxWidth()
            .height(74.px) // 设置行的高度为100dp
            .background(Color.White),
        verticalAlignment = Alignment.CenterVertically // 设置垂直居中
    ) {
        Spacer(modifier = Modifier.weight(100f))
        Text(
            text = buildAnnotatedString {
                withStyle(style = SpanStyle(fontSize = 24.mysp, color = MYBLACK)) {
                    append("总计 ")
                }
                withStyle(style = SpanStyle(fontSize = 20.mysp, color = MYBLUE)) {
                    append("¥")
                }
                withStyle(
                    style = SpanStyle(
                        fontSize = 24.mysp,
                        color = MYBLUE,
                        fontWeight = FontWeight.Bold
                    )
                ) {
                    append("12345.67")
                }
                withStyle(style = SpanStyle(fontSize = 20.mysp, color = MYBLUE)) {
                    append("元")
                }
            }
        )
        Spacer(modifier = Modifier.width(40.px))
        MyButton1000(
            fontSize=22.mysp,
            modifier = Modifier.size(160.px, 38.px),
            text = "报价说明", containerColor = MYBLACK_Percent10,
            textColor = MYBLACK,
            shape = RoundedCornerShape(8.px)
        ) {
        }
        Spacer(modifier = Modifier.width(260.px))
    }
}


@Composable
fun CustomSlider(
    width2:Int,
    modifier: Modifier = Modifier,
    width:Dp,
    value: Float, // 滑块的当前值
    onValueChange: (Float) -> Unit, // 滑动时回调
    thumbRadius: Int = 24, // 滑块的半径
    trackHeight: Dp = 4.dp // 滑动条高度
) {
    var touchX2 by remember { mutableFloatStateOf(0.0f) }

    // Box 容器用于绘制自定义滑动条和滑块
    Box(
        modifier = modifier.width(width + thumbRadius.px * 2).background(Color.Transparent)
            .height(thumbRadius.px * 2) // 保证滑块能被正确显示
            .pointerInput(Unit) {
//                detectTapGestures (
//                    onTap = { offset ->
//                        // 检测到单击事件
//                        val  touchX =    offset.x
//                        if(touchX >= thumbRadius && touchX <= width2 + thumbRadius){
//                            touchX2 = touchX-thumbRadius
//                            onValueChange((touchX-thumbRadius)/(width2 * 1.0f) * 100)
//                        }
//                    },
//            )
                detectDragGestures { change, dragAmount ->
                    val touchX = change.position.x
//                    Log.e("BaoJiaActivity","touchX:$touchX");
                    change.consume() // 消费触摸事件
                    if (touchX >= thumbRadius && touchX <= width2 + thumbRadius) {
                        touchX2 = touchX - thumbRadius
                        onValueChange((touchX - thumbRadius) / (width2 * 1.0f) * 100)
                    }
                }
            }
    ) {
        // 绘制滑动条
        Box(
            Modifier.width(width)
                .align(Alignment.Center)
                .height(trackHeight)
                .background(Color.White, shape = RoundedCornerShape(trackHeight / 2))
        )

        // 绘制已滑动部分的滑动条
        Box(
            Modifier
                .width(touchX2.dp / 3.5f)
                .align(Alignment.CenterStart)
                .height(trackHeight)
                .offset(x = thumbRadius.px)
                .background(Color.Blue, shape = RoundedCornerShape(trackHeight / 2))
        )

        Log.e("BaoJiaActivity", "value:$value");

        val offsetX = ((value) / 100) * width.value * 3.5f
//        Log.e("BaoJiaActivity","offsetX:$offsetX");
        // 绘制滑块
        Box(
            Modifier
                .offset(x = offsetX.dp / 3.5f)
                .size(thumbRadius.px * 2)
                .background(Color.Yellow, shape = CircleShape)
//                .align(Alignment.CenterStart)
        )
    }
}






